<style>
    .header>.base-line {
        position: absolute;
        height: 2px;
        /* width: 100px; */
        background-color: #fff;
        bottom: 5px;
        left: 0;
        display: none;
    }
</style>

<header class="header">
    <ul class="header-wrapper">
        <li>
            <a href="/js/knowledge">
            javascript知识点
            </a>
        </li>
        <li>
            <a href="/video/videoList">
                课程视频
            </a>
        </li>
        <li>js知识点相关文档</li>
        <li>面试题相关文档</li>
    </ul>
    <% include ./headSearch %>
        <div class="base-line"></div>

</header>

<script>
    $('.header-wrapper > li').on('mouseenter', function() {
        let $this = $(this)
        let width = $this.width();
        let posLeft = $this.offset().left;


        $('.base-line')
            .width(width)
            .show()
            .animate({
                left: posLeft
            }, 300)
    })
</script>